<template>
<!-- 删除功能暂未实现 需要循环删除 -->
    <div >
        <el-steps :active="active" finish-status="success" class="head-step">
            <el-step title="商品基本信息"></el-step>
            <el-step title="添加库存信息"></el-step>
            <el-step title="添加移动端详情"></el-step>
        </el-steps>
<!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
        <div class="app-container">
            <el-card  class="box-card">
                <div v-show="active===1">
                    <div>
                    
                    <div class="dead">基本信息</div>
                    <el-row>
                        <el-form :rules="rules" :inline="true" :model="product" class="demo-form-inline">
                            <el-col :span="8">
                                <el-form-item prop="name"  label="商品名称">
                                    <el-input  placeholder="商品名称" v-model="product.name" ></el-input>
                                </el-form-item>
                            </el-col>
                             <el-col :span="8">
                                <el-form-item  label="商品编码">
                                    <el-input  placeholder="商品编码" v-model="product.productSn" ></el-input>
                                </el-form-item>
                            </el-col>
                             <el-col :span="8">
                                <el-form-item  label="商品分类">
                                    <el-select  placeholder="商品分类" v-model="product.productCategoryName">
                                        <el-option label="创意" value="创意"></el-option>
                                        <el-option label="风格" value="风格"></el-option>
                                        <el-option label="饰品" value="饰品"></el-option>
                                        <el-option label="灯具" value="灯具"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item  label="商品品牌">
                                    <el-select  placeholder="品牌" v-model="product.brandId">
                                        <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                             <el-col :span="24">
                                <el-form-item  label="商品描述">
                                    <el-input type="textarea" v-model="product.description"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-row>
                    </div>
                    <div>
                    <div class="dead">商品属性</div>
                    <el-row>
                        <el-form :rules="rules" :inline="true" :model="product" class="demo-form-inline">
                            <el-col :span="8">
                                <el-form-item  label="商品原价">
                                       <el-input-number v-model="product.originalPrice" @change="handleChange" :min="0" label="描述文字"></el-input-number>                               
                                </el-form-item>
                            </el-col>
                             <el-col :span="8">
                                <el-form-item  label="促销类型">                                 
                                        <el-select v-model="product.region" placeholder="没有促销使用原价" :disabled="true">
                                            <el-option label="没有促销使用原价" value="0"></el-option>
                                            <el-option label="使用促销价" value="1"></el-option>
                                            <el-option label="使用会员价" value="2"></el-option>
                                            <el-option label="使用阶梯价格" value="3"></el-option>
                                            <el-option label="使用满减价格" value="4"></el-option>
                                            <el-option label="限时购" value="5"></el-option>

                                        </el-select>                               
                                </el-form-item>
                            </el-col>
                             <el-col :span="8">
                                <el-form-item  label="商品价格">                                   
                                       <el-input-number v-model="product.price" :disabled="true" @change="handleChange" :min="0" label="描述文字"></el-input-number>                            
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item  label="重量(kg)">   
                                       <el-input-number v-model="product.weight" @change="handleChange" :min="0" label="描述文字"></el-input-number>                             
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item  label="审核状态">
                               
                                        <el-switch  v-model="product.verifyStatus"  :active-value="1" :inactive-value="0"></el-switch>
                             
                                </el-form-item>
                            </el-col>
                             <el-col :span="10">
                                <el-form-item  label="是否上架">
                                        <el-switch  v-model="product.publishStatus"  :active-value="1" :inactive-value="0"></el-switch>
                                </el-form-item>
                            </el-col>
                             <el-col :span="24">
                                <el-form-item  label="缩略图">
                                    <!-- <template slot-scope="scope"> -->
                                        <el-upload
                                            class="avatar-uploader"
                                            :action="uploadUrl"
                                            :show-file-list="false"
                                            :headers="uploadHeaders"
                                            :on-success="handleAvatarSuccess"
                                            >
                                            <!-- @click.native="UpImage(scope.row)" 这个不知道用不用得上 -->
                                            <img v-if="product.pic" :src="product.pic" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                                        </el-upload>
                                        <!-- <img style="width:200px;height:auto" :src="product.pic" alt=""> -->
                                    <!-- </template> -->
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-row>
                    </div>
                    <div>
                    <div class="dead">其他信息</div>
                    <el-row>
                        <el-form :rules="rules" :inline="true" :model="product" class="demo-form-inline">
                            <el-col :span="8">
                                <el-form-item  label="推荐状态">
                                    <el-switch  v-model="product.recommendStatus"  :active-value="1" :inactive-value="0"></el-switch>              
                                </el-form-item>
                            </el-col>
                             <el-col :span="8">
                                <el-form-item  label="新品状态">
                                    <el-switch  v-model="product.newStatus"  :active-value="1" :inactive-value="0"></el-switch>           
                                </el-form-item>
                            </el-col>
                             <el-col :span="8">
                                <el-form-item  label="预告商品">
                                    <el-switch  v-model="product.previewStatus"  :active-value="1" :inactive-value="0"></el-switch>     
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item  label="搜索关键词">
                                  <el-input v-model="product.keywords" placeholder="请输入搜索关键词"></el-input>
                                </el-form-item>
                            </el-col>
                             <el-col :span="8">
                                <el-form-item  label="库存预警">
                                    <el-input-number v-model="product.lowStock" @change="handleChange" :min="0" ></el-input-number>                             
                                </el-form-item>
                            </el-col>
                             <el-col :span="8">
                                <el-form-item  label="商品排序">
                                    <el-input-number v-model="product.sort" @change="handleChange" :min="0" ></el-input-number>                           
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item  label="产品服务">
                                    <el-checkbox-group v-model="product.serviceIds">
                                        <el-checkbox label="1">无忧退货</el-checkbox>
                                        <el-checkbox label="2" >快速退款</el-checkbox>
                                        <el-checkbox label="3" >免费包邮</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-row>      
                    </div>    
                </div>
                <div v-show="active===2"> 
                    <div class="dead">商品sku信息</div>
                    <el-row>
                        <el-form :inline="true" :model="product" class="demo-form-inline">
                            <el-col :span="8">
                                <el-form-item   label="标题">
                                    <el-input  placeholder="标题" v-model="product.detailTitle" ></el-input>
                                </el-form-item>
                            </el-col>
                             <el-col :span="8">
                                <el-form-item   label="副标题">
                                    <el-input  placeholder="副标题" v-model="product.detailDesc" ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item   label="画册图片">
                                    <!-- <template slot-scope="scope"> -->
                                      <el-upload
                                        :action="uploadUrl"
                                        list-type="picture-card"
                                        :headers="uploadHeaders"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                        :limit="5"
                                        :on-success="handpictureCard">
                                        <i class="el-icon-plus"></i>
                                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb,文件不超过5个</div>
                                        </el-upload>
                                        <el-dialog :visible.sync="dialogVisible">
                                            <img width="100%" :src="product.albumPics" alt="">
                                        </el-dialog>
                                    <!-- </template> -->
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" class="skuitem">
                                <el-form-item  label="sku设置">
                                   <div class="skuisshow"  >
                                        <div class="skucolor" v-if="skuObj.color.list.length>0">
                                            <span >颜色:</span>                                        
                                                <el-checkbox-group v-model="skuObj.color.selList">            
                                                <el-checkbox v-for="(item,index) in skuObj.color.list" :key="index"
                                                    :label="item">
                                                    {{item}} 
                                                    <el-button @click="delSkuobj(item,skuObj.color.list,skuObj.color.selList)" style="color:red;" type="text">删除</el-button>
                                                </el-checkbox>                                                 
                                            </el-checkbox-group>                                                 
                                        </div>
                                         <div class="skucolor" v-if="skuObj.size.list.length>0">
                                            <span  >大小:</span>
                                             <el-checkbox-group v-model="skuObj.size.selList">         
                                                <el-checkbox v-for="(item,index) in skuObj.size.list" :key="index"
                                                    :label="item">
                                                    {{item}} 
                                                    <el-button @click="delSkuobj(item,skuObj.size.list,skuObj.size.selList)" style="color:red;" type="text">删除</el-button>
                                                </el-checkbox>          
                                            </el-checkbox-group>
                                        </div>
                                   </div>
                                   <div class="skuhead">
                                        <div class="skuhead-c">
                                            <el-input  placeholder="颜色描述:比如土豪金" size="mini" clearable v-model="skuObj.color.text" ></el-input>  
                                            <el-button size="mini" @click="addSkuAtr('color')">创建颜色选项</el-button>

                                        </div>
                                        <div class="skuhead-c">
                                           
                                            <el-input  placeholder="大小" size="mini" clearable v-model="skuObj.size.text" ></el-input>     
                                              <el-button size="mini" @click="addSkuAtr('size')">创建大小选项</el-button>
                                        </div>
                                        <div class="skuhead-c">
                                            <el-button class="btn" size="mini" type="primary" @click="createSku">生成sku列表</el-button>
                                            <el-button class="btn" size="mini" type="primary" @click="NewSku">新增sku</el-button>
                                        </div>
                                   </div>
                                   <div class="skutable">
                                        <el-table v-if="SkuStockList.length>0" :data="SkuStockList"  border style="width:90%">
                                            <el-table-column fixed  type="index" label="#" width="50"> </el-table-column>
                                            <el-table-column  label="图片"  width="100"> 
                                                <template slot-scope="scope">
                                                    <el-upload
                                                        class="avatar-uploader"
                                                        :action="uploadUrl"
                                                        :show-file-list="false"
                                                        :headers="uploadHeaders"
                                                        :on-success="handSuccess"
                                                        @click.native="ClickSku(scope.row)"
                                                        >
                                                    <img v-if="scope.row.pic" style="width:100%;height:auto" :src="scope.row.pic" alt="">
                                                    <i v-else style="width:100%;height:auto" class="el-icon-plus avatar-uploader-icon" />
                                                    </el-upload>
                                                </template>
                                            </el-table-column>
                                            <el-table-column  prop="color"  label="颜色" width="100"> 
                                                <template slot-scope="scope">
                                                    <el-input  placeholder="颜色" size="mini" clearable v-model="scope.row.color" ></el-input>  
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="size"  label="大小" width="100">
                                                 <template slot-scope="scope">
                                                    <el-input  placeholder="大小" size="mini" clearable v-model="scope.row.size" ></el-input>  
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="stock" label="库存" width="100">
                                                <template slot-scope="scope">
                                                    <el-input  placeholder="自定义库存" size="mini" clearable v-model="scope.row.stock" ></el-input>  
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="lowStock" label="预警库存" width="100">
                                                <template slot-scope="scope">
                                                    <el-input  placeholder="预警库存" size="mini" clearable v-model="scope.row.lowStock" ></el-input>  
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="lockStock" label="锁定库存" width="100">
                                                <template slot-scope="scope">
                                                    <el-input  placeholder="锁定库存" size="mini" clearable v-model="scope.row.lockStock" ></el-input>  
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="skuCode" label="sku编码" width="100">
                                                <template slot-scope="scope">
                                                    <el-input  placeholder="自定义Sku编码" size="mini" clearable v-model="scope.row.lockStock" ></el-input>  
                                                </template>     
                                            </el-table-column>
                                            <el-table-column prop="price" label="价格" width="100">
                                                <template slot-scope="scope">
                                                    <el-input  placeholder="自定义价格" size="mini" clearable v-model="scope.row.price" ></el-input>  
                                                </template> 
                                            </el-table-column>
                                            <el-table-column prop="sale" label="销量" width="100">
                                                 <template slot-scope="scope">
                                                    <el-input  placeholder="销量" size="mini" clearable v-model="scope.row.sale" ></el-input>  
                                                </template> 
                                            </el-table-column>                                    
                                            <el-table-column fixed="right"  label="操作" width="100">
                                                <template slot-scope="scope">
                                                    <el-button style="color:res" type="text" size="small" @click="delSku(scope.row)" >删除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                   </div>
                                   
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-row>
                </div>
                 <div v-show="active===3">
                    <div class="dead">详情描述</div>
                    <el-row>
                        <el-form :inline="true" :model="product" class="demo-form-inline">
                            <el-col :span="24">
                                    <el-form-item   label="商品详情">
                                        <Tinymce ref="Ti"/>
                                    </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                    <el-form-item   label="备注">
                                       <el-input  placeholder="备注" type="textarea" v-model="product.note"></el-input>
                                    </el-form-item>
                            </el-col>
                        </el-form>
                    </el-row>
                   
                </div>
                <div class="btn">
                    <el-button class="btns" v-if="active>1" size="small"  @click="pre">返回上一步</el-button>
                    <el-button class="btns" size="small" v-if="active<3"  @click="next" type="primary">{{nexts}}</el-button>
                    <el-button class="btns" size="small" v-if="active===3"  @click="submit" type="primary">提交保存</el-button>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
import list from "@/api/product/list";
import brand from "@/api/product/brand";
import mix from "@/mixin/index";
import Tinymce from "@/components/Tinymce";
import { v4 as uuidv4 } from 'uuid';
export default {
    mixins:[mix],
    components:{
        Tinymce
    },
    data(){
        return{
            //商品id
            id:'',
            //是否进行到下一步
            active:1,
            //商品详细信息
            product:{
                //商品名称
                brandName:'',
                //商品编码
                productSn:'',
                //商品分类
                productCategoryName:'',
                //商品品牌
                brandId:'',
                //商品描述
                description:'',
                //商品原价
                originalPrice:0,
                // 促销类型
                region:0,
                //商品价格
                price:0,
                //重量
                weight:0,
                //审核模式
                verifyStatus:0,
                //是否上架
                publishStatus:0,
                //缩略图
                pic:'',
                //推荐状态
                recommendStatus:0,
                //新品状态
                newStatus:0,
                //预告商品
                previewStatus:0,
                //搜索关键词
                keywords:'',
                //库存警告
                lowStock:0,
                //商品排序
                sort:0,
                // 产品服务
                serviceIds:'',
                //名字
                name:'',
                //副标题
                detailDesc:'',
                //标题
                detailTitle:'',
                //画册图片 连产品图片限制为5张，以逗号分割 ,
                albumPics:'',
                // 删除状态：0->未删除；1->已删除 ,
                deleteStatus:0,
                //移动端网页详情
                detailMobileHtml:'',
                //备注
                note:'',
                //产品属性分类 
                productAttributeCategoryId:'',
                //产品类别?
                productCategoryId:'',
                //促销类型：0->没有促销使用原价;1->使用促销价；2->使用会员价；3->使用阶梯价格；4->使用满减价格；5->限时购 ,
                promotionType:0,
                
            },
            //sku表单
            SkuStockList:[],     
            // 未拼接的sku
            skuObj:{
                  color:{
                    text:'',
                    list:[],//颜色选中列表
                    selList:[]//选中的颜色
                },
                size:{
                    text:'',
                    list:[], //大小列表
                    selList:[] //选中的大小
                }
            },
            //已拼接好的sku
             SkuList:[],
            //讲真不知道这是啥 获取出来d
            skus:[],
            //校验
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ]
            },
            //产品服务是数组
            checkList:[],
             //品牌列表
            brandList:[],  
            //暂存sku行内容;
            skuTempId:'',
            //画册图片
            dialogImageUrl: '',
            dialogVisible: false
        }
    },
    methods:{
        init(){

            if(this.id==''){
                // console.log('你好')
                return false;
            }else{
                 list.productSkusDetail(this.id).then(res=>{
                console.log(res);
                if(res.success){
                    this.product=res.data.product;
                   
                    this.skus=res.data.skus;
                     console.log( this.skus)
                }else{
                    this.$message.error("获取列表失败")
                }
            })
                
            }
           
        },
          brands(){
          //品牌列表
          brand.findAllBrand().then(res=>{
            //   console.log(res);
              if(res.success){
                  this.brandList=res.data.items;
                //   console.log(this.brandList)
              }else{
                  this.$message.error("请求品牌列表数据失败")
              }
          })
      },
      //图片上传成功后的回调
      handleAvatarSuccess(res, file){
          console.log(res,file);
          if(res.success){
              this.product.pic=res.data.fileUrl
          }else{
              this.$message.error("获取图片失败,请重新上传图片")
          }
        //    this.imageUrl = URL.createObjectURL(file.raw);
      },
      //点击图片上传
      UpImage(){

      },
      //画册图片 文件列表移除文件时的钩子
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      //画册图片 点击文件列表中已上传的文件时的钩子
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //画册成功后的回调
      handpictureCard(res, file){
          console.log(res,file)
          if(res.success){
              this.product.albumPics=res.data.fileUrl
          }else{
              this.$message.error("获取图片失败,请重新上传")
          }
      },
      //创建颜色,大小
      addSkuAtr(atrName){
        //   console.log(atrName);
          if(this.skuObj[atrName].text){
              this.skuObj[atrName].list.push(this.skuObj[atrName].text);
              this.skuObj[atrName].text=""; //添加之后输入框清空
          }
        //   console.log(this.skuObj[atrName].text)
          
      },
      //sku创建的颜色大小删除
      delSkuobj(e,list,selList){
          console.log(e,list,selList)
          //
        //   this[selList] = this[selList].filter(item => item.tempId != e.tempId)
        //     this[list] = this[list].filter((item) => item.tempId != e.tempId)
      },
      //生成sku列表
      createSku(){
        //   console.log(this.SkuList)
        //   if(this.SkuList.length==0){
        //       this.$message({
        //         type: 'warning',
        //         message: '请选择颜色按钮'
        //     });
        //     return;
        //   }
        this.$confirm('此操作将清空sku列表,并生成新的列表, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            var list=[[...this.skuObj.color.selList],[...this.skuObj.size.selList]];
            this.SkuList=list.reduce((current,total)=>{
                console.log(current,total)
                var SkuList=[]
                total.forEach(out=>{
                    current.forEach(inner=>{
                        if(typeof out==='object'){
                            SkuList.push([...out,innner])
                        }else{
                            SkuList.push([out,inner])
                        }
                    })
                })
                return SkuList
            })
            this.cerateSkuTableList();
            this.$message({
            type: 'success',
            message: '创建成功'
          }); 
            
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
       
        // console.log(this.SkuList)
     },
      //遍历属性,生成skuTable列表
      cerateSkuTableList(){
          this.SkuList.forEach((item,index)=>{
              var obj={
                //展示图片
                pic: "",
                //颜色
                color:item[0],
                //大小
                size:item[1],
                //库存
                stock:"",
                // 预警库存
                lowStock:0,
                //锁定库存
                lockStock:0,
                //sku编码 
                skuCode:"",
                //现价
                price: 0,
                //销量
                sale: "", 
                // 暂存id
                tempId:uuidv4()
              }
            this.SkuStockList.push(Object.assign({},obj))
          })
      },
      //新增 sku
      NewSku(){
           var list=[[...this.skuObj.color.selList],[...this.skuObj.size.selList]];
            this.SkuList=list.reduce((total,current)=>{
                console.log(current,total)
                var SkuList=[]
                total.forEach(out=>{
                    current.forEach(inner=>{
                        if(typeof out==='object'){
                            SkuList.push([...out,innner])
                        }else{
                            SkuList.push([out,inner])
                        }
                    })
                })
                return SkuList
            })
            this.cerateSkuTableList();
      },
      //删除sku
      delSku(){
        this.$confirm('此操作将永久删除该产品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.SkuStockList=this.SkuStockList.filter(item=>item.tempId!==row.tempId)
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //sku 图片上传成功的回调
      handSuccess(res, file){
          console.log(res,file);
          if(res.success){
              this.SkuStockList.forEach(item=>{
                  if(item.tempId===this.skuTempId){
                        item.pic=res.data.fileUrl
                  }
              })
              this.skuTempId=''
          }else{
              this.$message.error("上传图片失败,请重新上传")
          }
      },
      //点击sku图片
      ClickSku(row){
          this.skuTempId=row.tempId;
      },
      //下一步
      next(){
          this.active++;
      },
      //上一步
      pre(){
          this.active--;
      },
        //计数器发生改变时(待会是可以删除的)
    handleChange(value) {
        console.log(value);
      },
      //获取富文本内容
      
      getTin(){
          var ti=this.$refs.Ti.getContent()
          return ti
      },
      //设置富文本内容
      setTin(v){
            this.$refs.Ti.setContent(v)
      },
      //数据提交
      submit(){
          this.SkuStockList.forEach(item=>{
              delete item.tempId
              var apDataArr=[
                  {
                      key:"颜色",
                      value:item.color
                  },
                  {
                      key:"大小",
                      value:item.size
                  }
              ]
              item.spData=JSON.stringify(apDataArr);
              delete item.color
              delete item.size  
              //pmsSkuStockList  product
          })
        //   console.log(this.SkuStockList)
            // console.log('提交保存', this.form)
        list.addProductAndSkus({
            pmsSkuStockList:this.SkuStockList,
            product:this.product
        }).then(res=>{
            console.log(res);
            if(res.success){
                 this.$router.push({name:'ProductList'})
                //  this.init();
            }
        })
      },
    },
    created(){
        //判断是新增还是编辑
        if(this.id){
            this.id=this.$route.params.id;
        }else{
            this.id="";
        }
        
        // console.log(this.id)
        this.init();
      this.brands();

    },
    computed:{
        nexts(){
            var str='';
            switch (this.active) {
                case 1:
                    str="下一步,填写库存信息"
                    break;
                case 2:
                    str="下一步,填写移动端详情"
                    break;
            }
            return str
        }
    }

}
</script>
<style lang="scss" scoped>
@import "@/styles/myScss";

.head-step{
    width: 70%;
    margin: 30px auto;
    }
.dead{
    width: 100%;
    font-size: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 30px;
    
    }

.btn{
    width: 100%;
    display:flex;
    justify-content: center;
    
    }
// // //这是上传图的样式
//      .avatar-uploader .el-upload {
//     border: 1px dashed #d9d9d9;
//     border-radius: 6px;
//     cursor: pointer;
//     position: relative;
//     overflow: hidden;
//   }
//   .avatar-uploader .el-upload:hover {
//     border-color: #409EFF;
//   }
//   .avatar-uploader-icon {
//     font-size: 28px;
//     color: #8c939d;
//     width: 178px;
//     height: 178px;
//     line-height: 178px;
//     text-align: center;
//   }
//   .avatar {
//     width: 178px;
//     height: 178px;
//     display: block;
//   }
  //这里是sku
.skuitem{
    .skuisshow{
      width: 90%;
      margin:0 auto;
      .skucolor{
        display: flex;
        span{
            margin-right: 10px;
        }
      }
  }
  .skuhead{
    width:90%;
    margin:0 auto;
    //  display:flex;
    // justify-content:space-evenly;
  .skuhead-c{
      width:20%;
      float: left;
      margin-right:50px;
      .btn{
          float: left;
          width: 51%;
          margin-left: 0px;
          margin-top: 10px;
      }
  }
}
.skutable{
  width:80%;
  .el-table--border{
      margin-left: 45px;
  }
  
}

}
     
       
 
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>